//拓展vue原有的功能：全局组件 自定义指令 、挂载原型方法

// import XtxSkeleton from "./xtx-skeleton.vue";
// import XtxCarousel from "./xtx-carousel.vue";
// import XtxMore from './xtx-more.vue';
// import XtxBread from "./xtx-bread.vue";
// import XtxBreadItem from "./xtx-bread-item.vue";

// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
import Message from "./Message";
const importFn = require.context('./',false,/\.vue$/)
export default {
    install(app){
        // app.component(XtxSkeleton.name,XtxSkeleton),
        // app.component(XtxCarousel.name, XtxCarousel),
        // app.component(XtxMore.name, XtxMore),
        // app.component(XtxBread.name, XtxBread),
        // app.component(XtxBreadItem.name, XtxBreadItem),
        importFn.keys().forEach(key=>{
            // 导入组件
            const component = importFn(key).default
            //注册组件
            app.component(component.name,component)  
        })
        // 定义指令
        defineDirective(app)
        defineDirective2(app)
        // 定义一个原型函数
        app.config.globalProperties.$message = Message
    }
}
import defaultImg from '@/assets/images/200.png'
// 定义指令
const defineDirective = (app) =>{
    // 1、图片；懒加载指令
    // 原理：闲存储图片地址不能在src上 当图片进入可视区 将你存储的图片地址设置给图片元素
    app.directive('lazy',{
        // vue2.0 监听使用指令的DOM是否创建好 钩子函数 inserted 
        // vue3.0的指令拥有的钩子函数和组件的一样 监听使用指令的DOM是否创建好 钩子函数 mounted 
        mounted(el,bindings){
            // 2、创建一个观察对象，来观察当前使用指令的元素
            const observe = new IntersectionObserver(([{isIntersecting}])=>{
                if (isIntersecting) {
                    // 停止观察
                    observe.unobserve(el)
                    el.onerror = () => {
                        el.src = defaultImg
                    } 
                    // 把指令的值设置给el的src属性 bindings.value就是指令的值
                    el.src = bindings.value
                }
            },{

            })
            // 开启观察
            observe.observe(el) //观察当前使用指令的元素DOM
        }
    })
}

// 防止多次并发请求 防抖
const defineDirective2 = (app) => {
    app.directive('prevent',{
        mounted(el,binding){
            el.addEventListener('click',()=>{
                if (!el.disabled) {
                    el.disabled = true
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value ||3000);
                }
            })
        }
    })
}